<template>
  <div class="wh100" ref="vehicleTypePieRef"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.initVehicleTypePie()
    this.redraw()
  },
  methods: {
    initVehicleTypePie() {
      let myChart = this.$echarts.init(this.$refs.vehicleTypePieRef)
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: '30%',
          textStyle: {
            color: '#fff',
          },
          itemWidth: 20,
          itemHeight: 10,
        },
        color: ['#0034F9', '#25F3E6', '#F46F8A', '#FFFF43'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: [0, '30%'],

            label: {
              position: 'inner',
            },
            left: -130,
            data: [
              { value: 335, name: '' },
              { value: 310, name: '' },
              { value: 234, name: '' },
              { value: 135, name: '' },
            ],
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            label: {
              position: 'inner',
              show: false,
            },
            left: -130,
            data: [
              { value: 335, name: '客运车' },
              { value: 310, name: '危险品运输车' },
              { value: 234, name: '网约车' },
              { value: 135, name: '学生班车' },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
    redraw() {
      // this.initVehicleTypePie()
      // console.log('111')
      // _this = this
      // window.addEventListener('resize', this.initVehicleTypePie(), false)
    },
  },
}
</script>
<style lang="less" scoped>
.wh100 {
  width: 100%;
  height: 100%;
}
</style>
